<script lang="ts">
  export let size = "24";
  export let color = "currentColor";
</script>

<svg
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <rect x="2" y="2" width="4" height="4" fill={color} opacity="0.2" />
  <rect x="7" y="2" width="4" height="4" fill={color} opacity="0.4" />
  <rect x="12" y="2" width="4" height="4" fill={color} opacity="0.6" />
  <rect x="17" y="2" width="4" height="4" fill={color} opacity="0.8" />
  <rect x="2" y="7" width="4" height="4" fill={color} opacity="0.3" />
  <rect x="7" y="7" width="4" height="4" fill={color} opacity="0.5" />
  <rect x="12" y="7" width="4" height="4" fill={color} opacity="0.7" />
  <rect x="17" y="7" width="4" height="4" fill={color} opacity="0.9" />
  <rect x="2" y="12" width="4" height="4" fill={color} opacity="0.4" />
  <rect x="7" y="12" width="4" height="4" fill={color} opacity="0.6" />
  <rect x="12" y="12" width="4" height="4" fill={color} opacity="0.8" />
  <rect x="17" y="12" width="4" height="4" fill={color} />
  <rect x="2" y="17" width="4" height="4" fill={color} opacity="0.5" />
  <rect x="7" y="17" width="4" height="4" fill={color} opacity="0.7" />
  <rect x="12" y="17" width="4" height="4" fill={color} opacity="0.9" />
  <rect x="17" y="17" width="4" height="4" fill={color} />
</svg>
